<template>
  <div class="user">
    <screen v-bind="Config" v-model:searchData="searchData">
      <template #footer>
        <div class="handle-btns">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button :icon="RefreshRight" @click="reset">重置</el-button>
        </div>
      </template>
    </screen>
    <x-table
      :tableList="list"
      v-bind="tableConfig"
      v-loading="loading"
      :currentPage="searchData.page"
      :pageSize="searchData.psize"
      :count="count"
      @pageChange="handlePageChange"
      @pszieChange="handleSizeChange"
      @handleDeleteClcik="handleDeleteClcik"
      @handleEditClcik="handleEditClcik"
    >
      <template #enable="{ row }">
        <div @click="editStatus(row)" class="pointer">
          <el-icon :class="[row.enable === 0 ? 'green' : 'red', 'my-icon']">
            <component :is="row.enable === 0 ? CircleCheckFilled : CircleCloseFilled"></component>
          </el-icon>
          <span>{{ filterStatus(row.enable) }}</span>
        </div>
      </template>
      <template #create_time="{ row }">
        <span v-format-time>{{ row.create_time }}</span>
      </template>
    </x-table>
    <page-modal ref="pagemodalRef" :modalConfig="modalConfig" />
  </div>
</template>

<script setup lang="ts">
import { RefreshRight, Search, CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons"
import { computed, ref } from "vue"

import { usePageHandle } from "@/hooks/useSearchHandle"

import type { IUser } from "@/api"
import { getAllUser } from "@/api"

import { Config } from "./config/search.config"
import { tableConfig } from "./config/table.config"
import { modalConfig } from "./config/modal.config"

import screen from "@/components/screen"
import xTable from "@/components/table"
import PageModal from "@/components/page-modal1"

const searchData = ref({
  psize: 10,
  page: 1,
  username: "",
  name: "",
  enable: "",
  phone: "",
  create_time: ""
})
const list: IUser[] = ref([])
const count = ref(0)
const loading = ref(false)
const pagemodalRef = ref<InstanceType<typeof PageModal>>()
const fecthList = async () => {
  loading.value = true
  const user = await getAllUser(searchData.value)
  list.value = user.data.data
  count.value = user.data.count
  loading.value = false
}
const [search, reset, initData] = usePageHandle(fecthList, searchData)

// const handleSelectionChange = (val: IUser[]) => {}
// 分页  查询
const handleSizeChange = (val: number) => {
  searchData.value["psize"] = val
  fecthList()
}
const handlePageChange = (val: number) => {
  searchData.value["page"] = val
  fecthList()
}
fecthList()

const editStatus = (row: IUser) => {
  console.log(pagemodalRef.value)
  console.log(row)
}
const handleEditClcik = row => {
  pagemodalRef.value.dialogVisible = true
  // console.log(pagemodalRef.value.dialogVisible)
  // console.log(row)
}
const handleDeleteClcik = row => {
  console.log(row)
}
// 计算属性
const filterStatus = computed(() => status => {
  const statusList = ["启用", "禁用"]
  return statusList[status]
})
</script>

<style scoped lang="scss">
.user {
  .handle-btns {
    float: right;
    padding: 0 20px 10px 0;
  }
}
</style>
